import React,{useEffect,useState} from 'react'
import {Pagination, Table,Tag} from 'antd'
export default ()=>{
    const [page,setPage]=useState({
        total:0,
        rows:[]
    })
    const [queryParam,setQueryParam]=useState({
        pageSize:10,
        pageNum:1
    })
    const getUsers=async()=>{
        console.log('queryParam',queryParam);
        const result=await React.$api.admin.getUsersApi(queryParam)
        console.log('rsult',result.rows);
        setPage({
            total:result.total,
            rows:result.rows
        })
    }
    useEffect(()=>{
        getUsers()
    },[queryParam])
    const columns=[
        {
            title:'用户名',
            dataIndex:'username'
        },
        {
            title:'性别',
            dataIndex:'ssex',
            render:(arg)=>{
               if(arg){
                console.log(typeof arg);
                switch(~~arg){
                    case 0:return "男"
                    case 1:return "女"
                    case 2:return "保密"
                }
               }
            }
        },
        {
            title:'状态',
            dataIndex:'status',
            render:(arg)=>~~arg==1? <Tag color="processing">有效</Tag>:  <Tag color="error">锁定</Tag>
        }
    ]
    const changeHanle=(arg1,arg2)=>{
        //由于这里是异步操作，所以每次参数变化的时候，需要在useEffect来给第2个参数数组中监听
        setQueryParam({pageSize:arg2,pageNum:arg1})
    }
    return (<>
        用户管理模块
        <Table dataSource={page.rows}  columns={columns} rowKey={"userId"} pagination={false}></Table>

        <Pagination
            current={queryParam.pageNum}    //当前页
            total={page.total}              //总页数
            pageSize={queryParam.pageSize}  //每页显示的记录数
            pageSizeOptions={[3,5,10,15]}   //下来菜单切换记录数的数组
            onChange={changeHanle}          //当pageSize或者current发生变化的时候调用该函数
            //当total超过50的时候默认打开
            showSizeChanger={true}></Pagination> 
    </>)
}